<template>
  <div class="comment-list">
    <h2 v-show="hotcommentlist.length > 0 || mvhotcommentlist.length > 0">
      精彩评论 ({{ hotcommentlist.length || mvhotcommentlist.length }})
    </h2>
    <ul>
      <!-- 歌单的精彩评论 -->
      <li v-for="item in hotcommentlist" :key="item.commentId">
        <img class="user-img" :src="`${item.user.avatarUrl}`" alt="" />
        <div class="user">
          <h3>{{ item.user.nickname }}</h3>
          <span>{{ item.timeStr }}</span>
          <p>{{ item.content }}</p>
        </div>
        <div class="like">
          <span> {{ item.likedCount }}</span>
          <img
            v-if="item.src"
            @click="changelike(item)"
            src="../assets/images/unlike_icon.png"
          />
          <img
            v-else
            @click="changelike(item)"
            src="../assets/images/like_icon.png"
          />
        </div>
      </li>
      <!-- mv的精彩评论 -->
      <li v-for="item in mvhotcommentlist" :key="item.commentId">
        <img class="user-img" :src="`${item.user.avatarUrl}`" alt="" />
        <div class="user">
          <h3>{{ item.user.nickname }}</h3>
          <span>{{ item.timeStr }}</span>
          <p>{{ item.content }}</p>
        </div>
        <div class="like">
          <span> {{ item.likedCount }}</span>
          <img
            v-if="item.src"
            @click="changelike(item)"
            src="../assets/images/unlike_icon.png"
          />
          <img
            v-else
            @click="changelike(item)"
            src="../assets/images/like_icon.png"
          />
        </div>
      </li>
    </ul>
    <h2 v-show="hotcommentlist.length > 0 || mvhotcommentlist.length > 0">
      最新评论 ({{ commentlist.length || mvcommentlist.length }})
    </h2>
    <ul>
      <!-- 歌单的最新评论-->
      <li v-for="item in commentlist" :key="item.commentId">
        <img class="user-img" :src="`${item.user.avatarUrl}`" alt="" />
        <div class="user">
          <h3>{{ item.user.nickname }}</h3>
          <span>{{ item.timeStr }}</span>
          <p>{{ item.content }}</p>
        </div>
        <div class="like">
          <span>{{ likedCount }}</span>
          <img
            v-if="!item.src"
            @click="changelike(item)"
            src="../assets/images/unlike_icon.png"
          />
          <img
            v-else
            @click="changelike(item)"
            src="../assets/images/like_icon.png"
          />
        </div>
      </li>
      <!-- vm的最新评论 -->
      <li v-for="item in mvcommentlist" :key="item.commentId">
        <img class="user-img" :src="`${item.user.avatarUrl}`" alt="" />
        <div class="user">
          <h3>{{ item.user.nickname }}</h3>
          <span>{{ item.timeStr }}</span>
          <p>{{ item.content }}</p>
        </div>
        <div class="like">
          <span>{{ likedCount }}</span>
          <img
            v-if="!item.src"
            @click="changelike(item)"
            src="../assets/images/unlike_icon.png"
          />
          <img
            v-else
            @click="changelike(item)"
            src="../assets/images/like_icon.png"
          />
        </div>
      </li>
    </ul>
    <load-animate v-show="isload"></load-animate>
    <div v-show="isload" ref="loadmore" class="loadmore" @click.stop="loadmore">
      加载更多
    </div>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  props: {
    listid: {
      typeof: String,
      default: "0",
    },
    mvid: {
      typeof: String,
      default: "0",
    },
  },
  data() {
    return {
      commentlist: [],
      hotcommentlist: [],
      mvcommentlist: [],
      mvhotcommentlist: [],
      page: 1,
      isload: true,
      likedCount: Math.ceil(Math.random() * 1000),
    };
  },
  created() {
    this.getcommentlist();
    this.gethotcommentlist();
    this.getmvcommentlist();
    this.getmvhotcommentlist();
    window.addEventListener("scroll", this.windowscroll);
  },
  //销毁组件 移除滚动事件
  beforeDestroy() {
    window.removeEventListener("scroll", this.windowscroll);
  },
  methods: {
    async getcommentlist(offset = 0) {
      await this.axios
        .get(`/comment/playlist?id=${this.listid}&limit=20&offset=${offset}`)
        .then((res) => {
          let commentlist = res.comments;
          this.commentlist = this.commentlist.concat(commentlist);
          this.isload = true;
        });
    },
    async gethotcommentlist() {
      await this.axios
        .get(`/comment/hot?id=${this.listid}&type=2`)
        .then((res) => {
          this.hotcommentlist = res.hotComments.map((item) => {
            item.src = true;
            return item;
          });
        });
    },
    async getmvcommentlist(offset = 0) {
      await this.axios
        .get(`/comment/mv?id=${this.mvid}&limit=20&offset=${offset}`)
        .then((res) => {
          let mvcommentlist = res.comments;
          this.mvcommentlist = this.mvcommentlist.concat(mvcommentlist);
          this.isload = true;
        });
    },
    async getmvhotcommentlist() {
      await this.axios.get(`/comment/mv?id=${this.mvid}`).then((res) => {
        this.mvhotcommentlist = res.hotComments.map((item) => {
          item.src = true;
          return item;
        });
      });
    },
    loadmore() {
      this.page++;
      let offset = 20 * (this.page - 1);
      this.isload = false;
      this.getcommentlist(offset);
      this.getmvcommentlist(offset);
    },
    changelike(item) {
      if (item.src) {
        item.likedCount++;
        this.likedCount++;
      } else {
        item.likedCount--;
        this.likedCount--;
      }
      item.src = !item.src;
    },
    windowscroll: _.debounce(function () {
      //卷去的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //loadmore 距离顶部的距离
      let loadmoreHight = this.$refs.loadmore.offsetTop;
      //显示内容的高度
      let windowHight = window.innerHeight;
      if (scrollTop + windowHight >= loadmoreHight + 173) {
        this.loadmore();
      }
    }, 300),
  },
};
</script>
<style lang="scss" scoped>
.comment-list {
  h2 {
    font-size: 12px;
    color: #666;
    height: 23px;
    line-height: 23px;
    padding: 5px 10px;
    margin-top: 10px;
    background-color: #eeeff0;
  }
  ul {
    li {
      position: relative;
      padding-top: 10px;
      .user-img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-block;
        margin: 0 10px;
        vertical-align: top;
      }
      .user {
        width: 80%;
        display: inline-block;
        padding: 0 10px 10px 0;
        span {
          font-size: 12px;
          color: #999;
        }
        p {
          font-size: 15px;
        }
      }
      .like {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 12px;
        & img {
          width: 14px;
          height: 14px;
          margin-left: 5px;
          vertical-align: text-bottom;
        }
      }
    }
  }
  .loadmore {
    line-height: 50px;
    text-align: center;
  }
}
</style>
